<script setup lang="ts">
import dayjs from 'dayjs';
import { getUsers } from '@/api';
import { commonEnums } from '@/enums';
import useMyPagination from '@/hooks/useMyPagination';
import { GetUserReturn } from '@/interfaces/aboutApi';
import { UserFilled } from '@element-plus/icons-vue';

// 表格数据初始化以及处理分页 hooks
const { loading, pageNum, pageSize, total, state, initTableData, handleSizeChange, handleCurrentChange } =
  useMyPagination<GetUserReturn>(getUsers);
initTableData();

// 序号
const indexMethod = (index: number) => (pageNum.value - 1) * 10 + index + 1;

function handleEdit(row: any) {}
function handleDelete(row: any) {}

nextTick(() => {
  window.addEventListener('resize', () => {
    const table = document.querySelector('.el-table__body');
    table?.setAttribute('style', 'width: 50px');
  });
});
</script>

<template>
  <div class="w-full h-full p-4 box-border">
    <el-card shadow="hover">
      <el-table v-loading="loading" :data="state.tableData" height="218px">
        <el-table-column label="序号" :width="52" align="center" type="index" :index="indexMethod" />
        <el-table-column label="用户名" prop="username" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="flex items-center">
              <el-avatar v-if="row.avatar_url" :size="28" :src="row.avatar_url" />
              <el-avatar v-else :size="28" :icon="UserFilled" />
              <span class="ml-1">{{ row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性别" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="row.sex === commonEnums.FEMALE ? 'danger' : ''">{{ row.sex }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="phoneNumber" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ row.phoneNumber || '未知' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag v-for="item in row.roles" :key="item" effect="dark" :type="item === 'admin' ? 'danger' : ''" class="mr-1 mb-1">{{
              item === 'admin' ? '管理员' : '用户'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" show-overflow-tooltip>
          <template #default="{ row }">
            <span>{{ dayjs(row.create_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template #default="{ row }">
            <el-button type="primary" :disabled="row.username === 'admin'" text link size="small" @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button type="danger" :disabled="row.username === 'admin'" text link size="small" @click="handleDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-2">
        <el-pagination
          v-model:currentPage="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :small="true"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
